import React, { useState, useEffect } from 'react';
import { StyleSheet, Text } from 'react-native';
import { Button, Flex, Toast, WingBlank } from '@ant-design/react-native';
import FlexTextField from '@/rcomponents/flexTextField';
import { LoadingContainer } from '@/rcomponents/Container';
import { formatDate } from '@/helpers/dateutil';
import UserStore from '@/stores/userStore';
import Card from './components/responsiveCard';
import JobReturnPage from './jobReturnPage';
import WorkerUserSelectPage from './workerUserSelectPage';
import AreaJobStore from './areaJobStore';

const styles = StyleSheet.create({
  fatherContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    flexWrap: 'wrap',
    fontWeight: 'bold',
    width: 300,
    lineHeight: 30,
  },
});

function AreaJobDetailPage({ navigation, route }) {
  const ajStore = AreaJobStore.useStore();
  const userStore = UserStore.useStore();
  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      handleLoadJob();
    });

    return unsubscribe;
  }, [navigation]);
  const handleLoadJob = async () => {
    if (route.params) {
      const thisItem = {
        taskStageTid: route.params.id,
        flightTid: route.params.flightTid,
        taskArea: route.params.area,
      };
      await ajStore.getAreaJobDetail(userStore.user.LoginName, thisItem);
    }
  };
  const handleTaskReturn = (item) => {
    navigation.navigate(JobReturnPage.routeName, {
      id: item.id,
      flight_id: item.flight,
    });
  };
  const handleAssignRepairer = (item) => {
    navigation.navigate(WorkerUserSelectPage.routeName, {
      title: '派工',
      type: '2',
      acno: item.acno,
      ifMain: '1', //派技术员
      taskStageTid: item.taskStageTid,
      flightTid: item.flightTid,
      taskTid: [item.id],
    });
  };
  return (
    <LoadingContainer
      onRefresh={handleLoadJob}
      loading={ajStore.getAreaJobDetail.loading}
      data={ajStore.jobDetail}
      renderItem={({ item }) => (
        <Card key={item.id}>
          <Card.Header
            title={
              <Flex style={styles.fatherContainer} numberOfLines={10}>
                <Text style={styles.pwCardTitle}>
                  {item.cardTitle.replace(/<\/?.+?\/?>/g, '\n')}
                </Text>
              </Flex>
            }
          />
          <Card.Body>
            <Flex>
              <FlexTextField label="机号" fieldValue={item.acno} />
              <FlexTextField label="指令号" fieldValue={item.packNo} />
            </Flex>
            <Flex>
              <FlexTextField label="工卡号" fieldValue={item.jobCard} />
            </Flex>
            <Flex>
              <FlexTextField label="工作者" fieldValue={item.worker} />
            </Flex>
            <Flex>
              <FlexTextField
                label="计划"
                fieldValue={formatDate(item.planDate, 'YYYY-MM-DD')}
              />
              <FlexTextField
                label="完工"
                fieldValue={formatDate(item.finishDate, 'YYYY-MM-DD')}
              />
            </Flex>
            <Flex>
              <FlexTextField label="状态" fieldValue={item.planStatusDes} />
            </Flex>
          </Card.Body>
          <Card.Footer
            extra={
              <Flex>
                <WingBlank>
                  <Button
                    type="ghost"
                    size="small"
                    onPress={() => handleTaskReturn(item)}
                  >
                    退单
                  </Button>
                </WingBlank>
                <Button
                  type="primary"
                  size="small"
                  onPress={() => handleAssignRepairer(item)}
                >
                  派工
                </Button>
              </Flex>
            }
          />
        </Card>
      )}
    />
  );
}

AreaJobDetailPage.routeName = 'AreaJobDetail';
AreaJobDetailPage.permission = 'RAreaJobDetail';
export default AreaJobDetailPage;
